<template>
  <div class="home_container w_100 h_100 ">
    <nav class="home_nav w_100">
      <div class="home_nav_bg flex_column absolute top_0 w_100">
      </div>
      <div
        class="home_nav_content z_index_100 flex justify_between align_center fixed top_0 left_0 w_100 border_box px_20"
        :class="isFixed?'fix_bg':''">
        <div class="fontsize_32 font_bolder selected_none">
          <span>vite-design</span>
        </div>
        <div>
          <el-dropdown trigger="click" size="small">
            <div class="mt_6 flex justify_center align_center cursor_point">
              <span class="px_6">
                <img class="home_user_img radius_half"
                  :src="userInfo.avater?userInfo.avater:'http://files.pengxiaotian.com/avatar.jpeg?imageView2/1/w/80/h/80'"
                  alt="">
              </span>
              <span class="white">{{ userInfo.realname }}</span>
              <span class="iconfont icon-xiala1 white px_4"></span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="logout"><span class="iconfont icon-tuichu"></span>退出
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </nav>
    <div class="home_nav-main z_index_20 flex sticky w_100 selected_none" ref="navMainRef" :class="isFixed?'fix_bg':''">
      <canvas id="nav-canvas" style="position: absolute; z-index: -1; left: 0;"></canvas>
      <span v-for="nav in navs" :key="nav.id" class="nav-span">
        <a class="nav-link block text_center fontsize_14 cursor_point" :class="{ 'nav-active': activeNav === nav.id }"
          @click="toggleNav(nav)">
          <i :class="`iconfont ${nav.icon} nav-icon `" class="fontsize_16 pr_6"></i>{{ nav.name }}
        </a>
      </span>
    </div>
    <div class="home_shadow"></div>
    <div class="home-content">
      <router-view />
    </div>
  </div>
  <div class="side-toolbar" v-dialogDrag>
    <div class="chat_icon">
      <el-badge :value="chatUnreadNum" :max="99" :hidden="!chatUnreadNum">
        <el-icon :size="16" @click="handleShowChat">
          <iphone />
        </el-icon>
      </el-badge>
    </div>
  </div>
  <div v-dialogDrag class="we_chat" v-if="showChat" :class="fullChat?'chat-full-screen':''">
    <wechat></wechat>
  </div>
</template>

<script>
import {
  computed,
  defineAsyncComponent,
  defineComponent,
  onMounted,
  onUnmounted,
  ref,
} from "vue";
import { debounce } from "lodash-es";
import { NavCanvas } from "./NavCanvas";
import { useRoute, useRouter } from "vue-router";
import { Iphone } from "@element-plus/icons-vue";
import { useUserStore } from "../../store/user";
import { useChatStore } from "../../store/chat";

const wechat = defineAsyncComponent(() => import("../wechat/index.vue"));
let nc = null;
export default defineComponent({
  name: "home",
  components: { Iphone, wechat },
  setup() {
    const userStore = useUserStore();
    const chatStore = useChatStore();
    const userInfo = computed(() => userStore.userInfo);
    const showChat = computed(() => {
      return chatStore.showChat || false;
    });
    const fullChat = computed(() => chatStore.fullChat);
    const route = useRoute();
    const router = useRouter();
    const isFixed = ref(false);
    const navMainRef = ref(null);
    const chatUnreadNum = computed(() => chatStore.totalUnread);
    const navs = ref([
      {
        id: 0,
        key: "project",
        name: "我的可视化",
        icon: "icon-MyProject",
        path: "/project/list",
      },
      {
        id: 1,
        key: "data",
        name: "我的数据",
        icon: "icon-MyData",
        path: "/data/source",
      },
      { id: 2, key: "com", name: "我的组件", icon: "icon-MyCom", path: "/com" },
      {
        id: 3,
        key: "course",
        name: "教程",
        icon: "icon-MyCase",
        path: "/course",
      },
    ]);
    const activeNav = ref(0);
    const toggleNav = (nav) => {
      if (nc) {
        activeNav.value = nav.id;
        nc.toggle(nav.id);
        router.replace({ path: nav.path });
      }
    };
    const debNavResize = debounce(() => {
      if (nc) {
        nc.resize();
      }
    }, 500);
    const scroll = () => {
      isFixed.value = navMainRef.value.offsetTop > 249;
    };
    const handleShowChat = () => {
      chatStore.showChatAction(true);
    };
    const logout = async () => {
      await userStore.FedLogOut();
      router.push("/login");
    };
    onMounted(() => {
      const nav = navs.value.find((m) => {
        let path = route.path;
        return path.includes(m.key) && path.slice(1).startsWith(m.key);
      });
      activeNav.value = nav ? nav.id : 0;
      nc = new NavCanvas(
        "nav-canvas",
        ".home_nav-main .nav-span",
        activeNav.value
      );
      window.addEventListener("resize", debNavResize);
      window.addEventListener("scroll", scroll);
    });
    onUnmounted(() => {
      window.removeEventListener("resize", debNavResize);
      window.removeEventListener("scroll", scroll);
    });
    return {
      showChat,
      chatUnreadNum,
      fullChat,
      navs,
      isFixed,
      navMainRef,
      activeNav,
      logout,
      toggleNav,
      userInfo,
      handleShowChat,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./home.less";
</style>
